<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐首页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="page">
        <header>
            <img src="imgs/qqmusic.png" alt="QQmusic">
        </header>
        <section>
            <div class="song-list">
                <div>歌单推荐</div>
                <div class="sl-list">
                    <a href="#" class="list-item">为你推荐</a>
                    <a href="#" class="list-item">运动</a>
                    <a href="#" class="list-item">网络歌曲</a>
                    <a href="#" class="list-item">思念</a>
                    <a href="#" class="list-item">官方歌曲</a>
                    <a href="#" class="list-item">情歌</a>
                </div>
                <div class="sl-playlist">
                    <div class="sl-album">
                        <a href="#" class="sl-item">
                            <img src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1"
                                alt="" class="photo">
                            <div class="cover-mask"></div>
                            <img src="imgs/cover_play.png" class="cover-play">
                        </a>
                        <a class="cd">翻唱女神J.Fla | 只唱你最爱的旋律</a>
                        <div class="play-sum">播放量：891.4万</div>
                    </div>
                    <div class="sl-album">
                        <a href="#" class="sl-item">
                            <img src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1"
                                alt="" class="photo">
                            <div class="cover-mask"></div>
                            <img src="imgs/cover_play.png" class="cover-play">
                        </a>
                        <a class="cd">古风女声控，优美旋律为你而来</a>
                        <div class="play-sum">播放量：171.2万</div>
                    </div>
                    <div class="sl-album">
                        <a href="#" class="sl-item">
                            <img src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1"
                                alt="" class="photo">
                            <div class="cover-mask"></div>
                            <img src="imgs/cover_play.png" class="cover-play">
                        </a>
                        <a class="cd">想开一家早餐店，叫“早点见面</a>
                        <div class="play-sum">播放量：891.4万</div>
                    </div>
                    <div class="sl-album">
                        <a href="#" class="sl-item">
                            <img src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1"
                                alt="" class="photo">
                            <div class="cover-mask"></div>
                            <img src="imgs/cover_play.png" class="cover-play">
                        </a>
                        <a class="cd">好评999+英文歌！轻松解压100％</a>
                        <div class="play-sum">播放量：891.4万</div>
                    </div>
                    <div class="sl-album">
                        <a href="#" class="sl-item">
                            <img src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1"
                                alt="" class="photo">
                            <div class="cover-mask"></div>
                            <img src="imgs/cover_play.png" class="cover-play">
                        </a>
                        <a class="cd">书房背景乐 沉浸于字里行间的时光</a>
                        <div class="play-sum">播放量：891.4万</div>
                    </div>
                </div>
            </div>
            <div class="new-song song-list">
                <div>新歌首发</div>
                <div class="sl-list ns-list">
                    <a href="#" class="list-item">最新</a>
                    <a href="#" class="list-item">内地</a>
                    <a href="#" class="list-item">港台</a>
                    <a href="#" class="list-item">欧美</a>
                    <a href="#" class="list-item">韩国</a>
                    <a href="#" class="list-item">日本</a>
                </div>
                <div id="btn"><i></i>播放全部</div>
                <div class="ns-playlist">
                    <div class="ns-album">
                        <a href="#" class="ns-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg" alt=""
                                    class="photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">Sabotage</a>
                            <a id="singer">Bebe Rexha</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">如果人人爱音乐</a>
                            <a id="singer">张蔷</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">你就不要想起我</a>
                            <a id="singer">R1SE赵磊</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">软肋</a>
                            <a id="singer">李宇春</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">一爱如故《长歌行》电视剧插曲</a>
                            <a id="singer">摩登兄弟刘宇宁</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">向宿命挥拳的人《新斗罗大陆》手游戴沐白角色曲</a>
                            <a id="singer">阿云嘎</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">花好月圆</a>
                            <a id="singer">周迅</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">Renegades《浪客剑心 最终章》电影主题曲</a>
                            <a id="singer">ONE OK ROCK</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                    <div class="ns-album">
                        <a href="#" class="ns-item .sl-item">
                            <div class="ns-cover-mask">
                                <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg" alt=""
                                    class="photo">
                                <img src="imgs/cover_play.png" class="cover-play">
                            </div>
                        </a>
                        <div class="ifo">
                            <a id="name">驯化者</a>
                            <a id="singer">陈俊豪/陈誉庚/TGM-姜京佐/刘冠佑/罗一舟/唐九洲/G.G张思源</a>
                        </div>
                        <div id="time">02:56</div>
                    </div>
                </div>
            </div>
            <div class="mv song-list">
                    <div>MV</div>
                    <div class="sl-list">
                        <a href="#" class="list-item">精选</a>
                        <a href="#" class="list-item">内地</a>
                        <a href="#" class="list-item">韩国</a>
                        <a href="#" class="list-item">港台</a>
                        <a href="#" class="list-item">欧美</a>
                        <a href="#" class="list-item">日本</a>
                    </div>
                    <div class="sl-playlist">
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">向宿命挥拳的人（《新斗罗大陆》手游戴沐白角色曲）</a>
                            <a id="singer">阿云嘎</a>
                            <div class="mark-container"><i class="mark"></i>9370</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">雨</a>
                            <a id="singer">Sunnee杨芸晴</a>
                            <div class="mark-container"><i class="mark"></i>3585</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">一爱如故 (《长歌行》电视剧插曲)</a>
                            <a id="singer">摩登兄弟刘宇宁</a>
                            <div class="mark-container"><i class="mark"></i>43495</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">我很好骗</a>
                            <a id="singer">动力火车</a>
                            <div class="mark-container"><i class="mark"></i>11301</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">造梦时学会飞行 (《声梦传奇》主题曲)</a>
                            <a id="singer">TVB</a>
                            <div class="mark-container"><i class="mark"></i>1539</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">What's Wrong With Me (Punk Version)</a>
                            <a id="singer">Lil Ghost小鬼</a>
                            <div class="mark-container"><i class="mark"></i>206872</div>
                        </div>

                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">Let's Party (《和平精英》2周年庆派对邀请曲)</a>
                            <a id="singer">吴宣仪</a>
                            <div class="mark-container"><i class="mark"></i>67024</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">鋼の羽根</a>
                            <a id="singer">RADWIMPS</a>
                            <div class="mark-container"><i class="mark"></i>2927</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">에필로그 (epilogue)</a>
                            <a id="singer">IU</a>
                            <div class="mark-container"><i class="mark"></i>8197</div>
                        </div>
                        <div class="sl-album">
                            <a href="#" class="sl-item">
                                <img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg"
                                    class="mv-pto photo">
                                <div class="cover-mask"></div>
                                <img src="imgs/cover_play.png" class="cover-play">
                            </a>
                            <a id="name">圭贤《Coffee》MV</a>
                            <a id="singer">圭贤</a>
                            <div class="mark-container"><i class="mark"></i>15163</div>
                        </div>
                </div>
        </section>
        <footer></footer>
    </div>

</body>

</html>